<template>
  <div class="flexYbox height100">
    <ts-loading :loading="loading" />
    <iframe :src="params.url" frameborder="0" width="100%" height="100%" ref="ifr" title=""></iframe>
  </div>
</template>

<script>
export default {
  name: 'selfIframe',
  components: {},
  data: function() {
    return {
      params: {},
      loading: false,
      showLoading: false
    }
  },
  beforeCreate() {},
  created() {
    this.showLoading = true
  },
  mounted() {
    const ifr = this.$refs.ifr
    // IE和非IE浏览器，监听iframe加载事件不一样，需要兼容
    const that = this
    if (ifr.attachEvent) {
      // IE
      ifr.attachEvent('onload', () => {
        that.showLoading = false
      })
    } else {
      // 非IE
      ifr.onload = function() {
        that.showLoading = false
      }
    }
    this.params = this.paramsFn()
  },
  methods: {
    paramsFn() {
      if (this.$route.query && this.$route.query.url) {
        let url = this.$route.query.url + (this.$route.hash || '')
        if (url.indexOf('http') != 0) {
          // 不带http，手动拼凑
          url = location.origin + url
        }
        url =
          (url.indexOf('?') > -1 ? url + '&' : url + '?') +
          'token=' +
          (localStorage.getItem('token') ||
            localStorage.getItem('THPMSCookie') ||
            (global.isNoCookie ? localStorage.getItem('THPMSCookie') : null)) +
          '&software=bs' // 默认传递token和software
        for (let item of Object.keys(this.$route.query)) {
          // 拼凑更多树内容
          if (item != 'url') {
            url = url + '&' + item + '=' + this.$route.query[item]
          }
        }
        url = url.replace('?&', '?')
        global.themeColor = this.$store.state.theme
        return {
          url: url
          // id:this.$route.query.uuid
        }
      }
      return { url: '' }
    }
  },
  // beforeRouteLeave(to, from, next) {
  //   console.log('ttt', to, from)
  //   if (
  //     from &&
  //     from.query.url.indexOf('#/framework') > -1
  //   ) {
  //     // 低代码设计器中退出
  //     this.$mModal.confirm('当前页面数据未保存，确认离开').then(async type => {
  //       if (type === 'confirm') {
  //         next()
  //       }else{
  //         this.$route.go(1)
  //         next(false)
  //       }
  //     })
  //   } else {
  //     next()
  //   }
  // },
  watch: {
    '$store.state.theme': {
      // 监听颜色变化
      handler(n) {
        this.$refs.ifr.contentWindow.setThemeColor(n)
      },
      deep: true
    },
    showLoading: {
      handler(n) {
        let loading = document.getElementById('loading')
        if (!n) {
          this.loading = n
          loading ? (loading.style.display = 'none') : ''
        } else {
          // 如果内嵌loading未执行，则执行iframe的loading
          loading && loading.style.display != 'none' ? '' : (this.loading = n)
        }
      }
    },
    $route: {
      handler(newRouter, to) {
        if (to.name == 'selfIframe' || to.path.indexOf('/selfIframe') == 0) {
          // 判断统一路由情况下，参数不同渲染
          this.showLoading = true
          this.params = this.paramsFn()
        }
      }
    }
  }
}
</script>


<style lang="less" scoped>
/deep/.vxe-modal--box {
  height: 100% !important;
}
</style>






